<template>
  <div>
    <div class="container">
      <div>
        <ol class="breadcrumb">
          <li><a href="#">工具箱</a></li>
          <li class="active">iOS证书在线检测</li>
        </ol>
      </div>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="content">
            <el-row style="overflow:hidden;">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <div class="title">iOS证书在线检测</div>
                <div class="titletip">想检查证书到期时间？用户反馈无法下载安装？为您在线检测 iOS 证书是否正常</div>
              </el-col>
            </el-row>
            <div class="fileTestBox">
              <div class="fileTesttitle">
                <div class="p12" :class="{foucs:isfocus}" @click="testFile('p12')">p12文件检测</div>
                <div class="install" :class="{foucs:!isfocus}" @click="testFile('apk')">安装包检测</div>
              </div>
              <div v-show="isfocus">
                <div class="upTitle">请上传 iOS p12 证书</div>
                <div class="upfile">
                  <div class="file1">
                    <el-upload v-show="isupfile" style="width: 100%;" class="upload-demo"
                      action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange" :auto-upload=false
                      multiple :limit="1" :file-list="fileList">
                      <div class="p12File">
                        <el-image class="elimg" src="/static/workbox/onlineTest/p12.png"></el-image>
                      </div>
                      <div class="upfiletitle">
                        <div>点击选择文件或拖拽文件至此区域（支持 p12 格式证书）</div>
                      </div>
                    </el-upload>
                    <div class="reupfilebox" v-show="!isupfile">
                      <div class="fileName">{{fileName}}</div>
                      <div class="reupfile" @click="handelreUp">重新上传</div>
                    </div>
                  </div>
                </div>
                <div class="passworld">
                  <label class="lable">p12证书密码： </label><input type="text" v-model='p12passworld'
                    placeholder="如密码为空，可以不填">
                </div>
                <div class="button">
                  <el-button class="button1" @click="handeltest('p12')">立即检测</el-button>
                </div>
              </div>
              <div v-show="!isfocus">
                <div class="installTest">
                  <el-upload v-show="isupfile" style="width: 100%;" class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange1" :auto-upload=false
                    :limit="1" :file-list="fileList1">
                    <div class="p12File">
                      <el-image class="elimg2" src="/static/workbox/onlineTest/add.png"></el-image>
                    </div>
                    <div class="upfiletitle">
                      <div>点击选择文件或拖拽文件至此区域（支持 IPA 格式证书）</div>
                    </div>
                  </el-upload>
                </div>
              </div>
              <div class="amazed">
                <div class="amazed1"><img class="amazedimg" src="/static/workbox/onlineTest/amazed.png" alt="">
                  <span>您提交的证书文件和密码，将仅用于本次证书有效性检测，我们不会进行存储。</span></div>
                <div class="amazed2"><img class="amazedimg" src="/static/workbox/onlineTest/amazed.png" alt="">
                  <span>证书检测结果精准性100%</span></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <statement></statement>
  </div>
</template>

<script>
  import statement from "@/components/common/statement";
  import server from "@/components/common/server";


  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      statement,
      server
    },
    data() {
      //这里存放数据
      return {
        fileList: [],
        fileList1: [],
        p12Fileimg: '/static/workbox/onlineTest/success.png',
        mpFileimg: '/static/workbox/onlineTest/mp.png',
        isfocus: true,
        isupfile: true,
        fileName: '',
        file: null,
        file1: null,
        p12passworld: '',
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      // p12文件列表发生改变时
      handleChange(file, fileList) {
        console.log(file);
        console.log(fileList);
        this.isupfile = false;
        this.fileName = file.name;
        this.file = file
      },
      // 安装包文件列表发生改变时
      handleChange1(file, fileList) {
        console.log(file);
        console.log(fileList);
        this.isupfile = false;
        this.fileName = file.name;
        this.file1 = file
        this.handeltest('ipa')
      },
      // 重新上传
      handelreUp() {
        this.fileList = [];
        this.isupfile = true
      },
      handeltest(value) {
        var params = new URLSearchParams();
        params = new FormData(); //这种是通过form表单提交，可以提交文件
        if (value == 'p12') {
          params.append("p12file", this.file.raw);
          console.log(this.file.raw);
          params.append("p12Password", String(this.p12passworld));
          this.$post(this.API.p12check, params).then((res) => {
            console.log(123);
            console.log(res);
          })
        } else if (value == 'ipa') {
          params.append("ipafile", this.file1.raw);
          this.$post(this.API.ipacheck, params).then((res) => {
            console.log(123);
            console.log(res);
          })
        }
      },

      // 控制显示p12检测或安装包检测
      testFile(value) {
        if (value == 'p12') {
          this.isfocus = true;
        } else if (value == 'apk') {
          this.isfocus = false;
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .breadcrumb {
    margin: 20px 0px 0px 0px;
    background-color: transparent;
  }

  .content {
    background: #ffffff;
    box-shadow: 0px 4px 10px 2px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
  }

  .title {
    text-align: center;
    margin-top: 50px;
    width: 100%;
    height: 22px;
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 22px;
  }

  .titletip {
    width: 100%;
    text-align: center;
    margin-top: 16px;
    height: 20px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7E7E7E;
    line-height: 20px;
  }

  .fileTestBox {
    width: 780px;
    height: 682px;
    border-radius: 4px;
    border: 1px solid #DEDEDE;
    margin: 30px auto;
    overflow: hidden;
    margin-bottom: 60px;
  }

  .fileTesttitle {
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: row;
    border-radius: 4px 4px 0 0;
    border: 1px solid #167DF1;
    color: #167DF1;
    cursor: pointer;
  }

  .p12 {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .install {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .foucs {
    background-color: #167DF1;
    color: #Fff;
  }

  .upTitle {
    width: 100%;
    height: 16px;
    font-size: 16px;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 16px;
    margin-top: 43px;
    margin-bottom: 23px;
  }

  .upfile {
    width: 100%;
    height: 282px;
    overflow: hidden;
  }

  .file1 {
    width: 312px;
    height: 282px;
    border: 1px dashed #167DF1;
    margin: 0 auto;
  }

  div>>>input[type=file] {
    display: none;
  }

  .p12File {
    width: 100%;
    height: 80px;
    margin-top: 73px;
    text-align: center;
    position: relative;
  }

  div>>>.el-upload {
    width: 100%;
    outline: 0;
  }

  .p12File .elimg {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 68px;
    height: 80px;
  }

  .upfiletitle {
    width: 100%;
    height: 36px;
    text-align: center;
  }

  div>>>.el-upload-list__item-name {
    display: none;
  }



  .upfiletitle div {
    margin: 20px auto 0;
    width: 200px;
    height: 36px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3B3B3;
    line-height: 18px;
  }

  .reupfilebox {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .fileName {
    width: 272px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    vertical-align: middle;
    max-height: 144px;
    margin: 0 auto 0;
    text-align: center;
    overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
  }

  .reupfile {
    width: 48px;
    height: 12px;
    position: absolute;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #167DF1;
    line-height: 12px;
    cursor: pointer;
  }

  .passworld {
    width: 100%;
    height: 36px;
    line-height: 36px;
    margin-top: 36px;
  }

  .passworld .lable {
    width: 97px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-left: 180px;
  }

  .passworld input {
    width: 320px;
    height: 36px;
    background: #F5F7FA;
    border-radius: 4px;
    border: 1px solid #E4E7ED;
    padding-left: 11px;

  }

  .passworld input:focus {
    outline: none;
  }

  .button {
    height: 36px;
    width: 100%;
    text-align: center;
    margin-top: 35px;
  }

  .button1 {
    width: 160px;
    height: 36px;
    background: #167DF1;
    border-radius: 4px;
    color: #fff;
  }

  .amazed {
    width: 100%;
    height: 92px;
    background: #FF0E0E;
    border: 1px solid #FF0E0E;
    border-radius: 0px 0px 4px 4px;
    margin-top: 43px;
    font-size: 14px;
    color: #fff;
  }

  .amazedimg {
    width: 14px;
    height: 14px;
    margin-left: 30px;
    margin-right: 3px;
  }

  .amazed1 {
    width: 100%;
    height: 14px;
    line-height: 14px;
    margin-top: 23px;
  }

  .amazed2 {
    width: 100%;
    height: 14px;
    line-height: 14px;
    margin-top: 18px;
  }

  .installTest {
    width: 666px;
    height: 282px;
    background: #FFFFFF;
    border: 1px dashed #167DF1;
    margin: 76px auto 189px;
  }

  .add {
    width: 100%;
    height: 78px;
    margin-top: 74px;
    text-align: center;
    cursor: pointer;
  }

  .elimg2 {
    width: 78px;
    height: 78px;
  }

  .addTitle {
    width: 100%;
    height: 36px;
    margin-top: 21px;
  }

  .addTitle div {
    width: 180px;
    height: 36px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3B3B3;
    line-height: 18px;
    text-align: center;
    margin: 0 auto;
  }

</style>
